<template>
	<el-main>
		<el-card :header="text" body-style="border-top:1px solid #e4e7ed;margin-top:10px">
			<div class="topAdd">
				<div class="topData">
					<el-form ref="form" :model="form" label-width="120px">
						<el-row>
							<el-col :span="6">
								<el-form-item label="编号" prop="orderNo" required>
									<el-input v-model="form.orderNo" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="名称" prop="goods" required>
									<el-select v-model="form.goods" clearable style="width: 100%" filterable>
										<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="助记码" prop="specModel">
									<el-input v-model="form.specModel"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="6">
								<el-form-item label="条形码" prop="orderNum">
									<el-input v-model="form.orderNum" readonly></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="品牌" prop="produceNum">
									<div class="iconDis">
                                        <el-input v-model="form.specModel" placeholder="请选择" readonly></el-input>
                                        <el-button icon="el-icon-MoreFilled" @click="openPin"></el-button>
                                    </div>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="规格型号" prop="unit">
									<el-select v-model="form.unit" clearable style="width: 100%" filterable>
										<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row>
							<el-col :span="6">
								<el-form-item label="类别" prop="goodsCate" required>
									<div class="iconDis">
                                        <el-input v-model="form.goodsCate" placeholder="请选择" readonly></el-input>
                                        <el-button icon="el-icon-MoreFilled" @click="openCate"></el-button>
                                    </div> 
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="供应商" prop="goodsSpec">
                                    <div class="iconDis">
                                        <el-input v-model="form.specModel" placeholder="请选择" readonly></el-input>
                                        <el-button icon="el-icon-MoreFilled" @click="openGong"></el-button>
                                    </div>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>
		</el-card>
		<el-card style="margin-top:10px">
            <div class="top">
                计量单位 ( <el-checkbox v-model="unitCheck" size="large" @change="checkOen" /> <text class="text">支持多计量单位</text>)
            </div>
            <button class="button" v-if="unitCheck" @click="addTable">增加一个副单位</button>
            <scTable ref="table" :data="tableData" row-key="id" stripe hideDo border hidePagination>
                <el-table-column prop="unit"  width="80" align="center"></el-table-column>
                <el-table-column label="单位换算" prop="huanSuan" width="150" align="center">
                    <template #default="scope">
                        <div v-if="scope.row.id==1">
                            <div class="check" @click="openUnit(scope.row)" v-if="scope.row.huanSuan==''">点击选择</div>
                            <div class="check" v-else @click="openUnit(scope.row)">{{scope.row.huanSuan}}</div>
                        </div>
                        <div v-else style="display:flex;align-items: center;">
                            <div class="check" @click="openFuUnit(scope.row,scope.$index)" v-if="scope.row.huanSuan==''">点击选择</div> 
                            <div class="check" style="width: 55px;" v-else @click="openFuUnit(scope.row,scope.$index)">{{scope.row.huanSuan}}</div>
                             = <el-input v-model="scope.row.fuInput" style="width:40%" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="辅助计量" prop="fuZhu" width="150" align="center">
                    <template #default="scope">
                        <div class="unit">
                            <el-input v-model="scope.row.fuZhu" style="width:50%" />
                            <!-- <div class="check" @click="openUnit(scope.row)">选择单位</div> -->
                            <div class="check">选择单位</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="采购价" prop="caiPrice" width="120" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.caiPrice" />
                    </template>
                </el-table-column>
                <el-table-column label="成本价" prop="chenPrice" width="120" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.chenPrice" />
                    </template>
                </el-table-column>
                <el-table-column label="批发价" prop="piPrice" width="120" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.piPrice" />
                    </template>
                </el-table-column>
                <el-table-column label="零售价" prop="lingPrice" width="120" align="center">
                    <template #default="scope">
                        <el-input v-model="scope.row.lingPrice" />
                    </template>
                </el-table-column>
                <el-table-column label="默认单位" prop="defUnit" width="120" align="center">
                    <template #default="scope">
                            <el-radio :label="scope.row.defUnit"></el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="操作" prop="caoZuo" width="120" align="center">
                    <template #default="scope">
                        <div v-if="unitCheck && scope.row.id!=1" @click="deleteUnit(scope.row,scope.$index)" class="delete">删除</div>
                    </template>
                </el-table-column>
            </scTable>

        </el-card>
        <el-card style="margin-top:10px">
            <div class="top">
                多规格 ( <el-checkbox v-model="duoCheck" size="large" @change="checkTwo" /> <text class="text">启用多规格</text> <el-checkbox v-model="danCheck" size="large" @change="checkThree" :disabled="unitCheck" /> <text class="text">启用单品规格</text>)
            </div>
            <button class="button" v-if="duoCheck">增加一个规格</button>
        </el-card>
        <!-- <el-card style="margin-top:10px">
            <div class="top" style="padding-bottom: 10px;">行业特性</div>
            <div class="center">
                <div class="guanLi">
                    <div class="guanLeft">批号管理：</div>
                    <div class="guanRight">
                        <div class="radio">
                            <el-radio-group v-model="radioGuan" class="ml-4">
                                <el-radio label="1" size="large">启用</el-radio>
                                <el-radio label="2" size="large">停用</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="warn">
                            <el-icon size="14"><el-icon-InfoFilled /></el-icon>
                            <text>设置商品是否启用按批号进行出入库</text>
                        </div>
                    </div>
                </div>
                <div class="guanLi">
                    <div class="guanLeft">保质期管理：</div>
                    <div class="guanRight">
                        <div class="radio">
                            <el-radio-group v-model="radioGuan" class="ml-4">
                                <el-radio label="1" size="large">启用</el-radio>
                                <el-radio label="2" size="large">停用</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="use">保质期：<el-input type="number" v-model="day" style="width:10%" />
                            <el-select v-model="dayId" clearable  style="width:10%;margin-left:10px;"> 
                                <el-option v-for="item in dayType" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                            <text  style="margin-left:20px;">, 提前</text>
                            <el-input v-model="warnDay" style="width:10%" />
                            <text>天预警</text>
                        </div>
                        <div class="warn">
                            <el-icon size="14"><el-icon-InfoFilled /></el-icon>
                            <text>设置是否按批次号对库存商品的保质期进行管理，需启用【批次号管理】方可生效</text>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
        <el-card style="margin-top:10px">
            <div class="top" style="padding-bottom: 10px;">库存预警(<text style="color:#f00">按默认单位预警</text>)</div>
            <div class="display">
                <div class="input">最低库存：<el-input type="number" v-model="day" style="width:50%" /></div>
                <div class="input">最高库存：<el-input type="number" v-model="day" style="width:50%" /></div>
            </div>
        </el-card>
        <el-card style="margin-top:10px">
            <div class="top" style="padding-bottom: 10px;">其他信息</div>
            <div class="center">
                <div class="guanLi">
                    <div class="guanLeft">可销售：</div>
                    <div class="guanRight">
                        <div class="radio">
                            <el-radio-group v-model="radioGuan" class="ml-4">
                                <el-radio label="1" size="large">可以</el-radio>
                                <el-radio label="2" size="large">不可以</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="warn">
                            <el-icon size="14"><el-icon-InfoFilled /></el-icon>
                            <text>设置在销售模块中是否可选择到此商品</text>
                        </div>
                    </div>
                </div>
                <div class="guanLi">
                    <div class="guanLeft">可采购：</div>
                    <div class="guanRight">
                        <div class="radio">
                            <el-radio-group v-model="radioGuan" class="ml-4">
                                <el-radio label="1" size="large">可以</el-radio>
                                <el-radio label="2" size="large">不可以</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="warn">
                            <el-icon size="14"><el-icon-InfoFilled /></el-icon>
                            <text>设置在采购模块中是否可选择到此商品</text>
                        </div>
                    </div>
                </div>
                <div class="guanLi">
                    <div class="guanLeft">零售提成方式：</div>
                    <div class="guanRight">
                        <div class="jus">
                            <el-select v-model="dayId" clearable  style="width:20%;margin-left:10px;"> 
                                <el-option v-for="item in dayType" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                            <div class="tiCheng">提成：
                                <el-input v-model="day" type="number" style="width:50%" />
                            </div>
                        </div>
                        <div class="warn">
                            <el-icon size="14"><el-icon-InfoFilled /></el-icon>
                            <text>【按销售数量】提成，填写单件的提成金额；【按销售金额】时，中填写单件的提成比例</text>
                        </div>
                    </div>
                </div>
                <div class="guanLi">
                    <div class="guanLeft">销售提成方式：</div>
                    <div class="guanRight">
                        <div class="jus">
                            <el-select v-model="dayId" clearable  style="width:20%;margin-left:10px;"> 
                                <el-option v-for="item in dayType" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                            <div class="tiCheng">提成：
                                <el-input v-model="day" type="number" style="width:50%" />
                            </div>
                        </div>
                        <div class="warn">
                            <el-icon size="14"><el-icon-InfoFilled /></el-icon>
                            <text>【按销售数量】提成，填写单件的提成金额；【按销售金额】时，中填写单件的提成比例</text>
                        </div>
                    </div>
                </div>
                <div class="guanLi">
                    <div class="guanLeft">显示顺序：</div>
                    <el-input type="number" v-model="day" style="width:10%" />
                </div>
                <div class="guanLi">
                    <div class="guanLeft">备注：</div>
                     <el-input
                        v-model="remark"
                        :rows="2"
                        type="textarea"
                        style="width: 50%" 
                    />
                </div>
            </div>
        </el-card> -->
        <el-card style="margin-top:10px">
            <div class="top" style="padding-bottom: 10px;">商品相册</div>
             <sc-upload-file v-model="fileurl" :data="{ otherData: 'demo' }">
                <div class="upload">上传图片</div>
            </sc-upload-file>
        </el-card>
        <el-dialog v-model="pinPai" draggable title="选择品牌" width="40%">
            <div class="pinDisplay">
                <el-input v-model="pinKey" placeholder="品牌名称" style="width:30%" />
                <div class="btn">查询</div>
                <div class="btn">添加</div>
            </div>
            <div class="table" style="margin-top:10px;">
                <scTable ref="table" :data="dataName" row-key="id" stripe hideDo border>
                    <el-table-column prop="id" width="40" align="center"></el-table-column>
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
                    <el-table-column label="名称" prop="name" width="230" align="center" sortable></el-table-column>
                </scTable>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary"  @click="pinPai = false">确定</el-button>
                    <el-button @click="pinPai = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="category" draggable title="选择商品类别" width="40%">
            <div class="pinDisplay">
                <el-input v-model="pinKey" placeholder="商品类别" style="width:30%" />
                <div class="btn">查询</div>
                <div class="btn">添加</div>
            </div>
            <div class="table" style="margin-top:10px;">
                <scTable ref="table" :data="cateType" row-key="id" stripe hideDo border>
                    <el-table-column prop="id" width="40" align="center"></el-table-column>
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
                    <el-table-column label="名称" prop="name" width="230" align="center" sortable></el-table-column>
                </scTable>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary"  @click="category = false">确定</el-button>
                    <el-button @click="category = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="gongYin" draggable title="选择供应商" width="40%">
            <div class="pinDisplay">
                <el-select v-model="gongCate" clearable style="width: 20%" filterable placeholder="选择供应商类别">
                    <el-option v-for="item in gongType" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-input v-model="gongKey" placeholder="供应商编号/名称/联系人/手机号码" style="width:40%" />
                <div class="btn">查询</div>
            </div>
            <div class="table" style="margin-top:10px;">
                <scTable ref="table" :data="gongName" row-key="id" stripe hideDo border>
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
                    <el-table-column prop="id" width="40" align="center"></el-table-column>
                    <el-table-column label="供应商类别" prop="type" width="130" align="center"></el-table-column>
                    <el-table-column label="名称" prop="name" width="230" align="center"></el-table-column>
                    <el-table-column label="联系人" prop="human" width="100" align="center"></el-table-column>
                    <el-table-column label="手机号码" prop="phone" width="110" align="center"></el-table-column>
                </scTable>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary"  @click="gongYin = false">确定</el-button>
                    <el-button @click="gongYin = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="unitPopup" draggable title="选择单位信息" width="20%">
            <div class="pinDisplay">
                <el-input v-model="pinKey" placeholder="单位名称" style="width:30%" />
                <div class="btn">查询</div>
                <div class="btn">添加</div>
            </div>
            <div class="table" style="margin-top:10px;">
                <scTable ref="table" :data="unitName" row-key="id" stripe hideDo hidePagination border @selection-change="unitSelect">
                    <el-table-column prop="id" width="40" align="center"></el-table-column>
                    <el-table-column type="selection" width="50" align="center"></el-table-column>
                    <el-table-column label="名称" prop="name" width="100" align="center" sortable></el-table-column>
                </scTable>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <!-- <el-button type="primary"  @click="unitPopup = false">确定</el-button> -->
                    <el-button type="primary"  @click="huanQue">确定</el-button>
                    <el-button @click="unitPopup = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
	</el-main>
</template>

<script>
    export default {
        data() {
            return {
                id: this.$route.query.id,
                text:'基本信息',
                type:this.$route.query.type,
                remark:'',
                form: {
                    remark: "",
                    overData: "",
                    goodsSpec: "",
                    unit: "基本单位",
                    produceNum: "",
                    specModel: "",
                    goods: "",
                    orderNo: "asd",
                    goodsCate:"123"
                },
                dayId:1,
                day:"",
                warnDay:"",
                dayType: [
                    {
                        value: 1,
                        label: "天",
                    },
                    {
                        value: 2,
                        label: "月",
                    },
                    {
                        value: 3,
                        label: "年",
                    },
                ],
                options: [
                    {
                        value: "Option1",
                        label: "Option1",
                    },
                    {
                        value: "Option2",
                        label: "Option2",
                    },
                ],
                pinPai:false,
                pinKey:"",
                dataName:[
                    {id:0,name:"名称1" },
                    {id:1,name:"名称2" },
                    {id:2,name:"名称3" },
                    {id:3,name:"名称4" },
                    // {id:4,name:"名称5" },
                    // {id:5,name:"名称6" },
                    // {id:6,name:"名称7" },
                    // {id:7,name:"名称8" },
                    // {id:8,name:"名称9" },
                    // {id:9,name:"名称10" },
                    // {id:10,name:"名称11" },
                    // {id:11,name:"名称12" },
                    // {id:12,name:"名称13" },
                ],
                gongYin:false,
                gongKey:"",
                gongName:[
                    {id:0,type:"优质供应商",name:"这是很长的一段名称1",human:"阿柒",phone:15522225555},
                    {id:1,type:"其他供应商",name:"实例",human:"星星",phone:16622224444},
                    {id:2,type:"优质供应商",name:"广东十年",human:"杰哥",phone:18855556666},
                    {id:3,type:"标签供应商",name:"名称1",human:"老表",phone:19155552222},
                
                ],
                gongCate:"",
                gongType:[
                    {
                        value: "1",
                        label: "标签供应商",
                    },
                    {
                        value: "2",
                        label: "优质供应商",
                    },
                    {
                        value: "3",
                        label: "其他供应商",
                    },
                ],
                category:false,
                cateType:[
                    {id:0,name:"名称1"},
                    {id:1,name:"名称2",child:[
                        {id:11,name:"名称11"},
                        {id:12,name:"名称12"},
                    ]},
                    {id:2,name:"名称3"},
                    {id:3,name:"名称4"},
                ],
                unitCheck:false,
                duoCheck:false,
                danCheck:false,
                radioGuan:'',
                fileurl:'',
                tableData:[
                    {
                        id:1,
                        unit:"基本单位",
                        huanSuan:"",
                        fuZhu:"0",
                        caiPrice:"",
                        chenPrice:"",
                        piPrice:"",
                        lingPrice:"",
                        defUnit:"",
                        caoZuo:"",
                        fuInput:""
                    }
                ],
                unitName:[
                    {id:0,name:"袋" },
                    {id:1,name:"个" },
                    {id:2,name:"把" },
                    {id:3,name:"堆" },
                ],
                unitPopup:false,
                deUnit:[],
                a:0,
                fuIndex:""
            };
        },
        mounted() {
            // this.$store.commit("updateViewTagsTitle", this.id?`CURD编辑ID:${this.id}`:"CURD新增")
            // if(this.id){
            //     if(this.type==0){
            //         this.text = '生产加工'
            //     }
            // }
        },
        methods: {
            handleModify(row) {
                console.log('row :>> ', row);
            },
            handleDelete(row){
                console.log('row :>> ', row);
            },
            checkOen(e){
                this.unitCheck = e
            },
            checkTwo(e){
                this.duoCheck = e
            },
            checkThree(e){
                this.danCheck = e
            },
            //    品牌弹窗
            openPin(){
                this.pinPai = true
            },
            openCate(){
                this.category = true
            },
            openGong(){
                this.gongYin = true
            },
            // 单位弹窗
            openUnit(row){
                console.log(row);
                this.unitPopup = true
                this.fuIndex=''
            },
            openFuUnit(row,index){
                console.log(row);
                console.log(index);
                this.fuIndex = index
                this.unitPopup = true
            },
            huanQue(){
                 if(this.deUnit.length>1){
                    this.$message({
                        message: "请选择一种单位"
                    });
                    return;
                }
                this.unitPopup = false
                if(this.fuIndex){
                    this.tableData[this.fuIndex].huanSuan = this.deUnit[0].name
                }else{
                    this.tableData[0].huanSuan = this.deUnit[0].name
                }
            },
            unitSelect(unitName){
                this.deUnit = unitName
            },
            // 添加
            addTable(){
                this.a = this.tableData.length
                this.tableData.push({
                    unit:"副单位" + this.a,
                    huanSuan:"",
                    fuZhu:"0"
                })
            },
            // 删除副单位
            deleteUnit(row,index){
                console.log('row :>> ', row);
                this.a = this.tableData.length;
                this.tableData.splice(index,1)
                for(let i = 1; i < this.tableData.length; i++){
                    this.tableData[i].unit = "副单位" + (i);
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
.top{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e4e7ed;
    font-size: 16px;
    .el-checkbox{
        margin: 0 5px;
    }
}
.iconDis{
    display: flex;
    align-items: center;
}
.upload{
        padding: 10px;
        background: #11d1b0;
        color: #fff;
        border-radius: 4px;
        width: 90px;
        text-align: center;
        cursor: pointer;
        margin-top: 10px;
}
.button{
    padding: 4px 10px;
    background-color: #fff;
    border: 1px solid #3c91fc;
    color: #3C91FC;
    border-radius: 0px;
    cursor: pointer;
    margin-top: 5px;
}
.center{
    margin-left: 20%;
    .guanLi{
        display: flex;
        align-items: flex-start;
        margin: 10px 0;
        .guanLeft{
            font-size: 14px;
            margin-top: 10px;
            width: 100px;
            text-align: end;
        }
        .guanRight{
            .radio{
                margin-left: 5px;
            }
            .warn {
                display: flex;
                align-items: center;
                color: #f9686b;
            }
            .use{
                display: flex;
                align-items: center;
            }
            .jus{
                width: 800px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .tiCheng{
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
}
.display{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-top: 10px;
    .input{
        display: flex;
        align-items: center;
    }
}
.pinDisplay{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .btn{
        padding: 7px 10px;
        background: #11d1b0;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        margin: 0 5px;
        cursor: pointer;
    }
}
.unit{
    display: flex;
    align-items: center;
}
.check,.delete{
    padding: 4px;
    background: #eeeeee;
    margin-left: 2px;
    border-radius: 4px;
    cursor: pointer;
}
.delete{
    padding: 4px;
    background: #fdd;
    color: #f9686b;
}
</style>
